<template>
	<div class="user-msg-container" @click="handleClose">
		<div class="dialog-msg-container" @click.stop="handleShow">
			<div class="avatar pointer">
				<img v-if="imageUrl" :src="imageUrl" class="avatar-img" v-viewer :key="imageUrl">
				<!-- <el-upload class="boxrDiu" :action="uploadFileUrl" :show-file-list="false" name='upFile'
					accept=".jpg,.png" :headers="uploadHeaders" :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError"
					>
					<img src="../../../src/assets/images/takePhoto1.png" class="photo-icon" />
				</el-upload> -->
			</div>

			<div class="bodySne">
				{{dataObj.name}}
			</div>
			<div class="bodyBottom">
				<div class="message-content flexrbc">
					<div>企业</div>
					<div>{{dataObj.companyName?dataObj.companyName:'暂无'}}</div>
				</div>
				<div class="message-content flexrbc">
					<div>部门</div>
					<div>{{dataObj.departmentName?dataObj.departmentName:'暂无'}}</div>
				</div>
				<div class="message-content flexrbc">
					<div>岗位</div>
					<div>
						{{dataObj.departmentHead && dataObj.departmentHead.name?dataObj.departmentHead.name:'暂无'}}
					</div>
				</div>
				<div class="message-content flexrbc">
					<div>权限</div>
					<div>{{dataObj.roleArr?dataObj.roleArr[0].name:'暂无'}}</div>
				</div>
				<div class="message-content flexrbc">
					<div>工号</div>
					<div>{{dataObj.phone?dataObj.phone:'暂无'}}</div>
				</div>
				<div class="message-content flexrbc">
					<div>邮箱</div>
					<div>{{dataObj.email?dataObj.email:'暂无'}}</div>
				</div>

			</div>

		</div>
		<titlecontentDioed :visible="editShow" ref="titlecontentDioed" @closeAvatarDialog="closeAvatarDialog"
			@getFile='getFile' @defaultImg='defaultImg' />
	</div>
</template>
<script>
	// import personLabel from "./personLabel.vue";
	const IP = window.IP
	import titlecontentDioed from '../titlecontentDioed'

	import Cookies from 'js-cookie'
	import api from "@/api/http";

	import {
		getUploadFileUrl,
		getUploadVideoAndCover
	} from "@/api/model";
	export default {

		data() {
			return {
				nameFlag: '',
				flahShow: true,
				dataObj: {},
				department: [],
				uploadHeaders: {},
				imgPost: '',
				imageUrl: 'https://remote.ruifbl.com/document/d849f0bab76948fd931b6e07e4875ee0.png',
				addpartment: [],
				default_img: require('@/assets/images/user-blue.png'),
				editShow: false
			};
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		computed: {
			uploadFileUrl() {
				return getUploadFileUrl()
			}
		},
		watch: {
			visible() {
				// this.dataObj.icon = this.imageUrl
				if (this.visible == false) {

				} else {
					this.flahShow = true
					let obj = {
						companyId: sessionStorage.getItem('companyId'),
						userId: sessionStorage.getItem('userId')
					}
					// api.info().then((res => {
					// 	if (res.data.code == 200) {
					// 		this.dataObj = res.data.data
					// 		this.imageUrl = IP.resourUrl + res.data.data.icon

					// 	}
					// }))
				}
			}
		},
		created() {
			let token = sessionStorage.getItem('manageToken')
			this.uploadHeaders = {
				'Authorization': token
			}
			this.getInfo()
		},
		components: {
			titlecontentDioed
		},
		methods: {
			handleClose() {
				this.$emit(`close`)
			},
			handleShow() {
				return true
			},
			defaultImg() {
				this.$refs.titlecontentDioed.options.img = this.default_img
			},
			getFile(e) {
				// console.log(e, '上传');
				this.imgPost = e
				this.imageUrl = e
				this.editShow = false
				let obj = {
					"username": this.nameFlag,
					"name": this.dataObj.name,
					"age": this.dataObj.age,
					'sex': this.dataObj.age === '男' ? 0 : 1,
					"companyId": sessionStorage.getItem('companyId'),
					"departmentId": this.dataObj.departmentId,
					"expireTime": "2099-12-23",
					'activateTime': this.dataObj.activateTime,
					"organizationalId": 1,
					"roleId": this.dataObj.roleId,
					"password": this.dataObj.password,
					"phone": this.dataObj.phone,
					"id": this.dataObj.id,
					icon: this.imgPost
				}
				// api.peDitlAdd(obj).then((res => {
				// 	//
				// 	if (res.data.code == 200) {
				// 		this.$store.commit('user/SET_AVATAR', this.imageUrl)
				// 		this.$store.commit('user/SET_NAME', this.nameFlag)
				// 		// this.$emit('imageEmit')
				// 		this.getInfo()
				// 	}
				// }))
			},

			uploadSuccess(response, file, fileList) {
				// console.log(response);
				this.$refs.titlecontentDioed.options.img = IP.resourUrl + response.message
				// this.$refs.titlecontentDioed.imgPost = response.message
				// this.$refs.titlecontentDioed.multiples = 0.6
				this.editShow = true
			},
			beforeUpload(file) { 
				const isLt2M = file.size / 1024 / 1024 < 2;
				const fileType = file.name.toLowerCase().split('.').pop();
				if (fileType == 'jpg' || fileType == 'png') {
					if (!isLt2M) {
						this.$message.error('上传图片大小不能超过 2MB!');
						return false
					}
				} else {
					this.$message({
						type: 'error',
						message: '仅允许上传图片(.jpg,.png)'
					})
					return false
				}

			},
			uploadError(err) {
				let errObj = JSON.parse(err.message)
				if (errObj.code == 500) {
					this.$message({
						type: 'error',
						message: errObj.message
					})
				}
			},
			closeAvatarDialog(value) {

			},
			getInfo() {
				let obj = {
					companyId: sessionStorage.getItem('companyId'),
					userId: sessionStorage.getItem('userId')
				}
				// api.info().then((res => {
				// 	if (res.data.code == 200) {

				// 		this.dataObj = res.data.data;
				// 		// console.log(this.dataObj,'个人信息')
				// 		this.nameFlag = this.dataObj.username ? JSON.parse(JSON.stringify(this.dataObj
				// 				.username)) : JSON
				// 			.parse(JSON.stringify(this.dataObj.name))
				// 		this.imageUrl = IP.resourUrl + res.data.data.icon
				// 		sessionStorage.setItem('imageData', this.imageUrl)
				// 	}
				// }))
			},
			hideVisible() {
				this.department = []
				this.addpartment = []
				this.visible = false;
			},
			deledepartment(index) {
				this.addpartment.forEach((item, index1) => {
					if (item == this.department[index]) {
						this.addpartment.splice(index1, 1)
					}
				})
				this.department.splice(index, 1)
			},

			edtSize() {
				this.flahShow = false
			},
			// 确定事件
		},
	};
</script>
<style lang="scss">
	.user-msg-container {
		.el-upload {
			width: 100px;
			height: 32px;
		}
	}
</style>
<style scoped lang="scss">
	.dialog-msg-container {
		width: 100%;
		box-shadow: 0 0 10px #aaa;
		background-image: url('../../assets/images/user-bg.png');
		background-color: #fff;
		background-size: contain;
		background-position: top left;
		background-repeat: no-repeat;
		border-radius: 8px;
		overflow: hidden;

	}

	.avatar {
		margin: 100px 0 0 30px;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
		display: block;
		border: 2px solid #fff;
		position: relative;

		.avatar-img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
	}

	.bodySne {
		width: 100%;
		padding-left: 30px;
		font-size: 20px;
		margin-top: 14px;
		line-height: 32px;
		font-weight: bold;
	}

	.bodyBottom {
		width: 100%;
		padding: 0 30px 20px 30px;
		font-size: 16px;
		line-height: 28px;

		.message-content {
			margin-top: 16px;

			div:first-child {
				width: 60px;
				text-align: left;
				color: rgb(167, 161, 161);
			}

			div:last-child {
				width: calc(100% - 60px);
				text-align: left;
				color: #000;
			}


		}
	}

	.boxrDiu {
		width: 100px;
		height: 30px;
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		left: 0;
		bottom: 0;
		display: none;

		img {
			width: 25px;
			height: 25px;
			margin-top: 2px;
		}
	}

	.avatar:hover .boxrDiu {
		display: block;
	}
</style>